<template>
  <div class="table_container">
    <el-table :data="typeData" border style="width: 100%" max-height="450">
      <el-table-column prop="ttype" label="类型" width="50"></el-table-column>
      <el-table-column prop="mkt_value" label="市值" align="right">
        <template #default="scope">
          <span style="color: #4db3ff">{{
            scope.row.mkt_value.toFixed(2)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ratio" label="市值" align="right">
        <template #default="scope">
          <span style="color: #4db3ff">{{ scope.row.ratio.toFixed(2) }}%</span>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="fundData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="acc_name" label="账户"></el-table-column>
      <el-table-column prop="fund" label="基金"></el-table-column>
      <el-table-column
        prop="fund_name"
        label="基金名称"
        width="250"
      ></el-table-column>
      <el-table-column prop="ttype" label="类型"></el-table-column>
      <el-table-column prop="worth_date" label="净值日期"></el-table-column>
      <el-table-column prop="unit_worth" label="净值"></el-table-column>
      <el-table-column prop="mkt_value" label="市值" align="right">
        <template #default="scope">
          <span style="color: #4db3ff">{{
            scope.row.mkt_value.toFixed(2)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ratio" label="占比" align="right">
        <template #default="scope">
          <span style="color: #4db3ff">{{ scope.row.ratio.toFixed(2) }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="较昨日" align="right">
        <template #default="scope">
          <span :class="scope.row.diff >= 0 ? 'red' : 'green'">{{
            scope.row.diff.toFixed(2)
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="fillContainer">
      <el-form label-width="90px">
        <el-row :gutter="0" class="pull-right">
          <el-col :span="3">
            <el-form-item label="今日收益">
              <span>{{ profit }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { onMounted, getCurrentInstance, ref } from "vue";
import { getReport } from "@/apis/fund";

export default {
  name: "charts",
  setup() {
    let typeData = ref();
    let fundData = ref();
    const profit = ref();
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      getReport()
        .then(response => {
          typeData.value = response.data.ttype;
          fundData.value = response.data.fund.funds;
          profit.value = response.data.fund.profit;
        })
        .catch(error => {
          proxy.$message.error(error);
        });
    });
    return {
      typeData,
      fundData,
      profit
    };
  }
};
</script>

<style scoped>
.red {
  color: #f56767;
}
.green {
  color: #00d053;
}
.pull-right {
  float: right;
}
</style>
